// 这个组件用于测试，只能选中符合条件的表格数据，否则就会改变选中状态-->取消选中
<template>
  <div class="app-container">
    <h4>
      这个组件用于测试，只能选中符合条件的表格数据，否则就会改变选中状态
      <br>
      这里的条件是只能选中与第一条勾选发票相同购方名称的发票
    </h4>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="50" />
      <el-table-column prop="codeInvoice" label="发票代码" width="120" />
      <el-table-column prop="numInvoice" label="发票号码" width="180" />
      <el-table-column prop="tpyeInvioce" label="发票类型" width="105">
        <template v-slot="{row}">
          <el-tag 
            :type="row.tpyeInvioce | typeFilter(tagType)"
            :effect="row.tpyeInvioce | effectFilter(tagEffect)"
          >
            {{ transType(row.tpyeInvioce) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unAmount" label="未税金额" width="110" align="right"/>
      <el-table-column prop="taxAm" label="税额" width="100" align="right"/>
      <el-table-column prop="inAmount" label="含税金额" width="110" align="right"/>
      <el-table-column prop="kpDate" label="开票日期" width="100"/>
      <el-table-column prop="custName" label="购方名称" show-overflow-tooltip/>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
  import {transType} from '@/utils' 
  export default {
    data() {
      return {
        // 模拟的表格数据
        tableData: [
          { 
            id: "1",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "1",
            custName:'日月重工股份有限公司',
          },
          { 
            id: "2",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "2",
            custName:'日月重工股份有限公司',
          },
          { 
            id: "3",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "I",
            custName:'杭州中航云水科技有限公司',
          },
          { 
            id: "4",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "118.35",
            taxAm: "10.56",
            inAmount: "129.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "J",
            custName:'杭州中航云水科技有限公司',
          },
          { 
            id: "5",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "118.35",
            taxAm: "10.56",
            inAmount: "129.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "K",
            custName:'杭州中航云水科技有限公司',
          },
          { 
            id: "6",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "118.35",
            taxAm: "10.56",
            inAmount: "129.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "L",
            custName:'杭州中航云水科技有限公司',
          },
        ], 
        tagType: this.$store.state.tagType,
        tagEffect: this.$store.state.tagEffect,
        tpyeInvioceAll: this.$store.state.tpyeInvioceAll, // 发票类型
        multipleSelection: [] // 表格中选中的数据
      }
    },

    methods: {
      // 转换发票类型
      transType(val) {
        return transType(val)
      },
      // 取消所有选中
      toggleSelection() {
        this.$refs.multipleTable.clearSelection()
      },
      // 给每一行的数据添加index
      tableRowClassName({row, rowIndex}) {
        row.index = rowIndex
      },
      // 选择数据
      handleSelectionChange(val) {
        // 只能选择与第一个选中的公司名称相同的
        this.multipleSelection = val
        if(this.multipleSelection.length != 0){
          let filter = this.multipleSelection[0].custName
          this.multipleSelection.forEach(item => {
            if(item.custName != filter){
              this.$refs.multipleTable.toggleRowSelection(this.tableData[item.index])
            }
          })
        }
      }
    },
    filters: {
      typeFilter(type, tagType) {
        let typeMap = tagType
        return typeMap[type]
      },
      effectFilter(effect, tagEffect) {
        const effectMap = tagEffect
        return effectMap[effect]
      },
    },
  }

</script>

<style></style>